<template>
    <div class="wrap" ref="wrapper">
        <div> <div class="citytitle border-topbottom ">当前城市</div>
            <ul class="list clearfix">
                <li class="item"><button>{{currentcity}}</button></li>
            </ul>

            <div class="citytitle border-topbottom">热门城市</div>
            <ul class="list clearfix">
                <li class="item"
                    v-for="item of hotcities"
                    :key="item.id"
                    @click="Handleclick(item.name)"
                ><button>{{item.name}}</button></li>
            </ul>

            <div v-for="(item, key) of cities"
                 :key="key"
                 :ref="key"
            >
                <div class="citytitle border-topbottom" >{{key}}</div>
                <ul class="charlist clearfix" >
                    <li class="charitem"
                        v-for="Inneritem of item"
                        :key="Inneritem.id"
                        @click="Handleclick(Inneritem.name)"
                    >
                        <button class="button" >{{Inneritem.name}}</button></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapState } from 'vuex'
export default {
  name: 'CityList',
  computed: {
    ...mapState({
      currentcity: 'city'
    })
  },
  props: {
    cities: {
      type: Object
    },
    hotcities: {
      type: Array
    },
    letter: {
      type: String
    }
  },
  data () {
    return {
      activate: false
    }
  },
  mounted: function () {
    this.scroll = new Bscroll(this.$refs.wrapper)
  },
  methods: {
    Handleclick: function (cityname) {
      this.$store.dispatch('changeCity', cityname)
      this.$router.push('/')
    }
  },
  watch: {
    letter: function () {
      // console.log(this.letter)
      if (this.letter) {
        const element = this.$refs[this.letter]
        // console.log(element)
        this.scroll.scrollToElement(element[0])
      }
    }
  }
}
</script>

<style scoped lang="stylus">
    @import '~styles/variables.styl'
        .border-topbottom
            &:before
                border-color: #777
            &:after
                border-color: #777
        .wrap
            position: absolute
            top: 1.58rem
            left: 0
            right: 0
            bottom: 0
            overflow: hidden
            .citytitle
              height: 0.74rem
              width: 100%
              background-color: #eeeeee
              line-height: 0.74rem
              padding-left: 0.2rem
            .clearfix
               &:after
                 display: block
                 content: ""
                 height: 0
                 line-height: 0
                 clear: both
                 visibility: hidden
            .list
                padding: 0 0 0.1rem 0
                overflow: hidden
              .item
                height: 0.5rem
                width: 1.4rem
                float: left
                margin: .1rem .13rem 0 .22rem
                text-align: center
                border-radius: 0.1rem
                border: 0.02rem solid #cccccc
                button
                  font-family: "Microsoft Yahei"
                  font-size: 0.26rem
                  text-align: center
                  height: 0.5rem
                  background-color: #ffffff
              .activated
                background: #CCCCCC
            .charlist
              .charitem
                height: 0.7rem
                border-bottom: 0.01rem solid #cccccc
                width: 100%
                line-height: 0.7rem
                .button
                  background: #ffffff
                  margin-left: 0.2rem
                  font-size: 0.28rem
                  font-family: "Microsoft Yahei"

</style>
